<template>
  <div class="_wrap">
    <div class="_top">
      <div class="item">
        <img src="@/assets/imgFinance/icon1.svg">
        <div class="__num">
          <count-to ref="countTo" class="val" :start-val="0" :end-val="56230" :decimals="0" :duration="3600" /><!--<span class="unit">人日</span>-->
          <div class="label">本年教师工资支出（万元）</div>
        </div>
      </div>
    </div>
    <subTit title="各学段月度教师工资支出金额趋势"/>
    <div class="chartBox">
      <eChart :option="option"></eChart>
    </div>
  </div>
</template>

<script>
  import countTo from 'vue-count-to'
  import subTit from '../components/subTit'
  export default {
    name: 'itemLeftTop',
    components: { countTo, subTit },
    data() {
      return {
        interval: null,
        option: {}
      }
    },
    beforeDestroy() {
      if (this.interval) {
        clearInterval(this.interval);
      }
    },
    mounted() {
      let obj = {
        xAxisData: ['2023-10', '2023-11', '2023-12', '2024-01', '2024-02', '2024-03'],
        seriesData: [
          { name: '幼儿园', data: [1503, 1510, 1515, 1408, 1552, 1580] },
          { name: '小学', data: [2009, 2123, 2174, 2185, 2102, 2068] },
          { name: '初中', data: [1035, 958, 1210, 1102, 1135, 1092] },
          { name: '高中', data: [925, 985, 965, 932, 958, 992] },
          { name: '中职', data: [102, 112, 126, 109, 106, 118] },
          { name: '其他', data: [94, 92, 93, 94, 103, 96] }
        ]
      }
      this.option = this.getOption(obj)
      this.handleStart()
    },
    methods: {
      getOption({xAxisData, seriesData}){
        return {
          title: {
            text: '单位：万元',
            textStyle: {
              color: '#fff',
              fontFamily: 'PingFangSC',
            },
            top: '10px',
          },
          legend: {
            top: '10px',
            right: 0,
            data: seriesData.map(item => {
              return item.name
            }),
            width: 200,
            height: 60,
            orient: 'vertical',
            itemGap: 12,
            icon: 'rect',
            itemWidth: 8,
            itemHeight: 8,
            formatter:(name)=>{
              let arr = [
                '{a|' + name + '}'
              ]
              return arr.join('')
            },
            textStyle: {
              rich: {
                a: {
                  fontSize: 16,
                }
              }
            }
          },
          grid: {
            left: '5px',
            right: '10px',
            top: '80px',
            bottom: '20px',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: (params) => {
              let html = ''
              for (let i = 0; i < params.length; i++) {
                const formatNum = (value) => {
                  if(!value&&value!==0) return 0;
                  let str = value.toString();
                  let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
                  return str.replace(reg,"$1,");
                }
                let val = params[i].value ? params[i].value : 0
                let name = i===0 ? `<div>${params[i].name}</div>` : ''
                html += `
                  <div class="tooltip">
                    ${name}
                    <div class="item">
                        <div>${params[i].marker}</div>${params[i].seriesName}<span>${formatNum(val)}</span>万元
                    </div>
                  </div>
                `
              }
              return html
            },
            textStyle: {
              // fontSize: 32,
              color: '#fff'
            },
            borderColor: 'rgba(0,161,255,0.42)', // transparent
            backgroundColor: ' rgba(1,33,59,0.65)', // transparent
            padding: [5, 10]
          },
          xAxis: {
            type: 'category',
            // boundaryGap: false,
            data: xAxisData,

            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255, .16)',
              }
            },
            axisLabel: {
              // rotate: -30,
              interval: 0,
              fontSize: 14,
              color: 'rgba(255,255,255,0.8)'
            }
          },
          yAxis: [
            {
              name: '',
              type: 'value',
              min: 0,
              // max: 500,
              // interval: 100,
              nameTextStyle: {
                align: 'center',
                fontSize: 16,
                color: '#fff'
              },
              axisLabel: {
                formatter: '{value}',
                fontSize: 14,
                color: 'rgba(255,255,255,0.8)'
              },
              splitLine: {
                show: true, // 是否显示分隔线
                lineStyle: {
                  color: 'rgba(255,255,255,0.16)',
                  type: 'dashed',
                  width: 1
                }
              },
              axisLine: {
                show: false
              },
              splitArea: {
                show: false // 是否显示分隔区域
              }
            },
          ],
          series: seriesData.map(item => {
            return {
              ...item,
              type: 'line',
              smooth: false,
            }
          })
        }
      },
      handleStart(){
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          this.$refs.countTo.start()
        }, 8600) // 8.6 = 间隔5秒更新 + 数字动画3.6s
      }
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    ._top {
      padding: 6px 0 24px;
      display: flex; justify-content: center;
      .item {
        /*display: grid; grid-template-columns: 1fr 1fr;*/
        display: flex; align-items: center;
        img { width: 60px; height: 60px; margin-right:24px;}
        .__num {
          .val { font-size: 24px; color: #00FFFA; font-family: DINPro; letter-spacing: 1px; }
          .unit { font-size: 16px; font-family: PingFangSC; }
          .label { font-size: 16px; font-family: PingFangSC; }
        }
      }
    }
    .chartBox { height: 324px; }
    ::v-deep .tooltip {
      .item {
        display: flex; align-items: center; color: rgba(255,255,255,.8);
        .marker { visibility:hidden }
        span { color: #00FFFA; font-family: DINPro; font-size: 16px; margin: 0 6px; }
      }
    }
  }
</style>
